<template>
  <div>
    <div class="choose">
      <!-- 选择状态 -->
      <el-select v-model="value" clearable placeholder="请选择">
        <el-option label="受理成功" value="受理成功"></el-option>
        <el-option label="未受理" value="未受理"></el-option>
      </el-select>
      <el-button icon="el-icon-search" @click="searchValue(value)" circle></el-button>
    </div>
    <el-table
      :data="LipeiData.data.filter(data => !search || data.clientName.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
    >
      <el-table-column width="120px" label="客户姓名" prop="clientName"></el-table-column>
      <el-table-column label="所购保险" prop="insuranceName"></el-table-column>
      <el-table-column label="保险价格" prop="insurancePirce"></el-table-column>
      <el-table-column label="理赔描述" prop="reason"></el-table-column>
      <el-table-column label="理赔金额" prop="payment"></el-table-column>
      <el-table-column  label="理赔状态" prop="status"></el-table-column>
      <el-table-column label="创建时间" prop="time" style="width: 100px"></el-table-column>

      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope" >
          <el-button type="text">拒绝</el-button>
          <el-button size="mini" type="info" plain @click="backLipe(scope.row._id)">撤回</el-button>
          <el-button size="mini" type="danger" @click="agree(scope.row._id)">同意</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="LipeiData.currentPage-0"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="LipeiData.pageSize-0"
      layout="total, sizes, prev, pager, next, jumper"
      :total="LipeiData.total"
    ></el-pagination>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers("lipei");
export default {
  data() {
    return {
      search: "",
      value: "",
    };
  },
  created() {
    this.getLipeiAsync();
  },
  computed: {
    ...mapState(["LipeiData", "lipei"]),
  },
  methods: {
    ...mapActions(["getLipeiAsync", "agreeLipei", "backLipeMsg"]),
    ...mapMutations(["setCurrent", "setPageSize"]),

    //同意受理
    agree(_id) {
      this.agreeLipei(_id);
    },
    //撤回
    backLipe(_id) {
      this.backLipeMsg(_id);
    },
    handleSizeChange(val) {
      this.setPageSize(val);
      this.getLipeiAsync();
    },
    handleCurrentChange(val) {
      this.setCurrent(val);
      this.getLipeiAsync();
    },
    searchValue(val) {
      console.log(val);
      this.getLipeiAsync(val);
    },
  },
};
</script>

<style>
.choose {
  float: right;
}
</style>